<!-- 安装依赖项之前，请确保安装了GSAP -->
<!-- 在终端运行以下命令安装GSAP -->
<!-- npm install gsap --save -->

<template>
  <div >
    <iframe 
      src="https://www.littlefox.com/cn/player_h5/view" 
      width="800" 
      height="600"
      frameborder="0"
      allowfullscreen
    ></iframe>
    <!-- <video >
    <source controls
      width="600" src="https://www.littlefox.com/cn/player_h5/view" type="video/mp4"></video> -->
    <!-- <h1>六一儿童节快乐！</h1>
    <div class="animation-area">
      <div class="balloon"></div>
      <div class="confetti"></div>
    </div>

    <div class="carousel">
        <div class="carousel-image">1</div>
        <div class="carousel-image">2</div>
        <div class="carousel-image">3</div>
        <div class="carousel-image">4</div>
        <div class="carousel-image">5</div>
        <div class="carousel-image">6</div>
        <div class="carousel-image">7</div>
        <div class="carousel-image">8</div>
        </div> -->
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import gsap from 'gsap';
import { Observer } from 'gsap/Observer';
   gsap.registerPlugin(Observer); 
console.log('oberrver------:', Observer)
onMounted(() => {
 
    init1();
    init2();
});
function init1() {
    // 初始化动画
    gsap.fromTo(
        '.balloon',
        { y: '100%', x: '50%', scale: 0 },
        { duration: 2, y: '20%', x: '50%', scale: 1, ease: 'bounce', repeat: -1, yoyo: true }
    );

    gsap.fromTo(
        '.confetti',
        { opacity: 0, scale: 0 },
        { duration: 4, opacity: 1, scale: 1, ease: 'power2.inOut', stagger: 0.2, repeat: -1 }
    );
}

function init2() {
    const images = document.querySelectorAll('.carousel-image')
    const radius = 242
    const progress = {
    value: 0
    }
    const carousel = document.querySelector('.carousel')
    
    gsap.observe('.carousel', {
        type: "wheel,pointer",
        onPress: (self) => {
            carousel.style.cursor = 'grabbing'
        },
        onRelease: (self) => {
            carousel.style.cursor = 'grab'
        },
        onChange: (self) => {
            gsap.killTweensOf(progress)
            const p = self.event.type === 'wheel' ? self.deltaY * -.0005 : self.deltaX * .05
            gsap.to(progress, {
            duration: 2,
            ease: 'power4.out',
            value: `+=${p}`
            })
        }
    })

    const animate = () => {
    images.forEach((image, index) => {
        const theta = index / images.length - progress.value
        const x = -Math.sin(theta * Math.PI * 2) * radius
        const y = Math.cos(theta * Math.PI * 2) * radius
        image.style.transform = `translate3d(${x}px, 0px, ${y}px) rotateY(${360 * -theta }deg)`
        const c = Math.floor(index/images.length * 360)
        image.style.background = `hsla(${c}, 90%, 50%, .5)`
    })
    }
    gsap.ticker.add(animate)
}
</script>

<style scoped>
body {
  font-family: Roboto, sans-serif;
}

.carousel {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform: rotateX(-20deg) translateY(-70px);
  transform-style: preserve-3d;
  perspective: 800px;
  user-select: none;
  cursor: grab;
}

.carousel-image {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  transform: translate3d(0, 0, -10px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transform-origin: 50% 50%;
}

@media (max-width: 600px) {
  .carousel {
    transform: rotateX(-10deg) scale(.6) translateY(-60px);
  }
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f8ff;
}

h1 {
  font-size: 3em;
  color: #ff6f61;
  text-shadow: 2px 2px #4ecdc4;
}

.animation-area {
  position: relative;
  width: 80%;
  height: 80%;
}

.balloon {
  position: absolute;
  width: 100px;
  height: 150px;
  background: linear-gradient(to bottom, #ff6f61, #ff9a8b);
  border-radius: 50% 50% 50% 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ffeb3b;
  border-radius: 50%;
  opacity: 0;
}
</style>
